<template>
  <el-table :data="props.tableData" @selection-change="(val) => emit('select', val)" @contextmenu.prevent
    @row-click="(row) => emit('rowClick', row)" @row-contextmenu="RightClickRow"   border>
    <el-table-column type="selection" v-if="props.isSelect" align="center" />
    <el-table-column type="index" v-if="props.isShowSerial" label="序号" :width="60" align="center" />
    <el-table-column v-for="item in props.column" :key="item.prop" :prop="item.prop" :label="item.label"
      :width="item.width" :fixed="item.fixed" show-overflow-tooltip align="center">
      <template #default="scope">
        <div class="tableCell" v-if="!item.isTag">
          <el-tooltip :content="scope.row[item.prop] + ''" class="box-item" effect="dark" placement="top">
            {{ scope.row[item.prop] }}
          </el-tooltip>
        </div>
        <div class="tableCell" v-else>
          <el-tooltip :content="scope.row[item.prop] + ''" class="box-item" effect="dark" placement="top">
            <el-tag style="margin-right: 8px"
              :color="item.tagEnumColor ? item.tagEnumColor(scope.row[item.prop]) : '#f39800'">
              <span class="tagText">{{ scope.row[item.prop] }}</span>
            </el-tag>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
    <el-table-column v-if="props.handel" :fixed="props.handel.fixed || false" :label="props.handel.label"
      :width="props.handel.width || 120" align="center">
      <template #default="scope">
        <el-tooltip class="box-item" v-for="item in props.handel.option" effect="dark" :content="item.contents + ''"
          :key="item.icon" placement="top">
          <!-- <el-link 
            @click="item.method(scope.row)" 
            :disabled="item.disabled ? item.disabled(scope.row) : false" 
            class="iconfont"       
            :underline="false" 
          >          
        </el-link> -->
        </el-tooltip>
        <el-button  type="success"  size="small" @click="consent">同意</el-button>
        <el-button type="danger" size="small" @click="refuse">拒绝</el-button>
      </template>
    </el-table-column>
  </el-table>
  <v-contextmenu ref="contextmenu" v-if="props.isRowRight">
    <v-contextmenu-item v-for="item in props.rightMenu" :key="item.content">
      <span v-if="!item.children" @click="RightClick(item)">{{ item.content }}</span>
      <v-contextmenu-submenu :title="item.content" v-else>
        <v-contextmenu-item v-for="ele in item.children" :key="ele.key" @click="RightClick(ele)">
          <span> {{ ele.content }} </span>
        </v-contextmenu-item>
      </v-contextmenu-submenu>
    </v-contextmenu-item>
  </v-contextmenu>
</template>

<script setup>
import { KeepAlive } from 'vue';


const isMenu = ref(false)
const props = defineProps({
  handel: Object,
  column: Array,
  tableData: Array,
  isSelect: Boolean,
  isRowRight: Boolean,
  rightMenu: Object,
  isShowSerial: Boolean
})
const emit = defineEmits(['select', 'rowClick'])
const contextmenu = ref()
const ClickRow = ref()
const RightClickRow = (row, column, event) => {
  if (!props.isRowRight) {
    return
  }
  ClickRow.value = row
  isMenu.value = true
  contextmenu.value.show({ left: event.pageX, top: event.pageY })
}
const RightClick = (ele) => {
  ele.methods(ClickRow.value)
}
window.addEventListener('click', () => {
  if (isMenu.value) {
    contextmenu.value.hide()
    isMenu.value = false
  }
})
</script>

<style lang="scss" scoped>
.tableCell {
  align-items: center;
  overflow: hidden;
  cursor: default;

  span {
    overflow: hidden;
  }
}

.el-table {
  height: 98%;
}

.tagText {
  font-size: 14px;
  color: #fff;
}

.icon-shanchu:hover {
  color: red;
}

.iconfont {
  font-size: 18px;
  margin-right: 3px;
}
</style>